<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Sistema Provisional de Acceso al Banco de Datos de Opini&oacute;n P&uacute;blica de la USB"/>
        <meta name="keywords" content="encuestas, datos, Laboratorio F, usb"/>
        <title>Sistema Provisional de Acceso al Banco de Datos de Opini&oacute;n P&uacute;blica de la USB </title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="lib/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.validate.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
        <script type="text/javascript">
            $(document).ready(function() {

                $().ajaxStart(function() {
                    $('#loading').show();
                    $('#result').hide();
                }).ajaxStop(function() {
                    $('#loading').hide();
                    $('#result').fadeIn('slow');
                });

                $('#form, #fat, #signupForm').submit(function() {
                    $.ajax({
                        type: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(data) {
                            $('#result').html(data);

                        }
                    })

                    return false;
                });
            });

            $().ready(function() {

                // validate signup form on keyup and submit
                $("#signupForm").validate({
                    rules: {
                        nombre: {
                            required: true,
                            minlength: 2
                        },
                        apellido: {
                            required: true,
                            minlength: 2
                        },
                        universidad: {
                            required: true,
                            minlength: 2
                        },
                        correo: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true,
                            minlength: 8
                        },
                        confirm_password: {
                            required: true,
                            minlength: 8,
                            equalTo: "#password"
                        },
                        tipoUsuario: {
                            required: true
                        },

                        profesorEncargado: {
                            required: true,
                            minlength: 2
                        }
                    },
                    messages: {
                        nombre: {
                            required: "Por favor introduzca su nombre",
                            minlength: "Su nombre debe contener al menos 2 caracteres"
                        },
                        apellido: {
                            required: "Por favor introduzca su apellido",
                            minlength: "Su apellido debe contener al menos 2 caracteres"
                        },
                        universidad: {
                            required: "Por favor introduzca el nombre de la universidad a la que pertenece",
                            minlength: "El nombre de la universidad debe contener al menos 2 caracteres"
                        },
                        justificacion: {
                            required: "Por favor introduzca una justificación a la solicitud",
                            minlength: "La justificación debe contener al menos 2 caracteres"
                        },
                        profesorEncargado: {
                            required: "Por favor introduzca el nombre del profesor encargado a la solicitud",
                            minlength: "La justificación debe contener al menos 2 caracteres"
                        },
                        correo: "Por favor, introduzca una dirección válida de correo electrónico",
                        password: {
                            required: "Por favor introduzca contraseña",
                            minlength: "La constraseña debe posser al menos 8 digitos"
                        },
                        confirm_password: {
                            required: "Por favor introduzca contraseña",
                            minlength: "La constraseña debe posser al menos 8 digitos",
                            equalTo: "Por favor, introduzca la misma contraseña anterior"
                        },
                        tipoUsuario: {
                            required: "Por favor seleccione el tipo de usuario"

                        }
                    }
                });


            });
        </script>

        <script language="javascript">

            function mostrarReferencia(){
                //Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
                if (document.signupForm.tipoUsuario[1].checked == true) {
                    //muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
                    document.getElementById('desdeotro').style.display='table-row'
                    //por el contrario, si no esta seleccionada
                } else {
                    //oculta el div con id 'desdeotro'
                    document.getElementById('desdeotro').style.display='none';
                    document.signupForm.profesorEncargado.value = '    ';
                }
            }

        </script>




        <style type="text/css">
            #signupForm {width:  500px;}
            #signupForm label.error {
                margin-left: 0px;
                width: auto;
                display: block;
            }

        </style>
    </head>
    <body>
               <div align="center">
                    <div align="center"><div id="result"></div>
                        <form name="signupForm" id="signupForm" action="logica/agregarUsuario.php"  method="POST"  >
                            <table width="500" border="0" align="center" bordercolor="#DFDFDF" bgcolor="#DFDFDF">
                                <tr bgcolor="#5B5D5F">
                                    <th colspan="2"><div align="center" class="style3" style="color: #fff">Solicitud de Acceso </div></th>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td width="118"><span class="style3">Nombre:</span></td>
                                    <td width="450"><input name="nombre" id="nombre" type="text" value="" maxlength="50" class="required" minlength="2" size="40"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Apellido:</span></td>
                                    <td><input name="apellido" id="apellido" type="text" value="" maxlength="50" class="required" minlength="2"size="40"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Universidad:</span></td>
                                    <td><input name="universidad" id="universidad" type="text" value="" maxlength="100" class="required" minlength="2" size="40"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Correo:</span></td>
                                    <td><input name="correo" id="correo" type="text" maxlength="360"  class="required email" minlength="2" size="40"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Contraseña:</span></td>
                                    <td><input name="password" id="password" type="password" maxlength="50"  class="required" minlength="8" size="40"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Confirme Contraseña:</span></td>
                                    <td><input name="confirm_password" id="confirm_password" type="password" maxlength="50"  class="required" minlength="8" size="40"></input></td>                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Tipo de usuario:</span></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><input type="radio" name="tipoUsuario" value="Profesor" id="profesor"  onclick="mostrarReferencia();"  /> Profesor</td>
                                    <td><input type="radio" name="tipoUsuario" value="Estudiante" id="estudiante" onclick="mostrarReferencia();" /> Estudiante</td>
                                </tr>

                                <tr bordercolor="#333333" style="display:none" id="desdeotro">
                                    <td><span class="style3">Tutor Academico (Nombre y Apellido):</span></td>
                                    <td><input name="profesorEncargado" id="profesorEncargado" type="text" value="" maxlength="50" class="required" minlength="2"size="40" onclick="mostrarReferencia();"></input></td>
                                </tr>
                                <tr bordercolor="#333333">
                                    <td><span class="style3">Justificación:</span></td>
                                    <td><textarea name="justificacion" id="justificacion" cols="40" rows="4" maxlength="500"  minlength="2" ></textarea> </td>
                                </tr>
                                <tr bordercolor="#333333">
                                </tr>

                                 <script language="javascript">
                                    function cambiarCursor(){
                                        document.body.style.cursor = "wait";
                                        setTimeout("document.body.style.cursor = 'default'", 4000);
                                    }
                                </script>

                                <tr bordercolor="#333333">
                                    <td height="26" colspan="2"><div align="center">
                                            <input class="submit" type="submit" value="Enviar solicitud"  onclick="cambiarCursor()"></input>

                                        </div></td>
                                </tr>
                            </table>
                            <p>&nbsp;</p>


                        </form>
                    </div>

                    <div id="footer">
                    </div>
                </div>
            
    </body>
</html>
